<script setup lang="ts">
import { computed } from "vue"
import { Handle, Position, useVueFlow } from "@vue-flow/core"

const props = defineProps(["id", "data"])

const { updateNodeData } = useVueFlow()

const value = computed({
  get: () => props.data.value,
  set: (value) => updateNodeData(props.id, { value })
})
</script>

<template>
  <span>{{ props.data.algo }}算法</span>
  <el-input :id="`${id}-input`" v-model="value" placeholder="请输入变量名" class="nodrag" size="small" />
  <Handle type="target" :position="Position.Left" :connectable="false" />
</template>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  font-size: 14px;
  &::placeholder {
    font-size: 14px;
  }
}
</style>
<style lang="scss" scoped>
.vue-flow__node-output input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 10px #0000001a;
}

// :deep(.el-input__wrapper) {
//   background: rgba(236,245,255,0.1);
//   border-radius: 4px 4px 4px 4px;
//   border: 1px solid rgba(228,231,237,0.1);
// }

.vue-flow__node-output input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ec4899;
  transition: box-shadow 0.2s;
}
</style>
